import { fontSize } from '@/units'

const colorList = [
  'rgba(93, 151, 251, 0.3)',
  'rgba(204, 179, 252, 0.3)',
  'rgba(118, 195, 251, 0.3)',
  'rgba(255, 218, 132, 0.3)',
  'rgba(138, 173, 255, 0.3)',
  'rgba(245, 198, 156, 0.3)',
  'rgba(192, 157, 245, 0.3)',
  'rgba(248, 183, 131, 0.3)',
  'rgba(97, 210, 245, 0.3)',
  'rgba(49, 212, 189, 0.3)',
  'rgba(109, 137, 238, 0.3)',
  'rgba(140, 173, 238, 0.3)',
  'rgba(242, 140, 140, 0.3)',
  'rgba(130, 222, 196, 0.3)',
  'rgba(182, 203, 134, 0.3)',
  'rgba(180, 189, 255, 0.3)',
]
const activeColor = [
  'rgba(93, 151, 251, 1)',
  'rgba(204, 179, 252, 1)',
  'rgba(118, 195, 251, 1)',
  'rgba(255, 218, 132, 1)',
  'rgba(138, 173, 255, 1)',
  'rgba(245, 198, 156, 1)',
  'rgba(192, 157, 245, 1)',
  'rgba(248, 183, 131, 1)',
  'rgba(97, 210, 245, 1)',
  'rgba(49, 212, 189, 1)',
  'rgba(109, 137, 238, 1)',
  'rgba(140, 173, 238, 1)',
  'rgba(242, 140, 140, 1)',
  'rgba(130, 222, 196, 1)',
  'rgba(182, 203, 134, 1)',
  'rgba(180, 189, 255, 1)',
]
const getTreeMap1Data = (data) => {
  return data.map((item, index) => {
    let color = colorList[index]
    return {
      pkid: item.pkid,
      name: item.name,
      value: item.value,
      itemStyle: {
        color: color,
      },
      label: {
        fontSize: fontSize(0.16),
      },

      // grid: {
      //   left: 0,
      //   top: 0,
      //   right: 0,
      //   bottom: 0,
      // },
      emphasis: {
        itemStyle: {
          color: activeColor[index],
        },
      },
    }
  })
}

const TreeMap1Option = ({ data, activeType }) => {
  const datalist = getTreeMap1Data(data, activeType)

  return {
    visualMap: {
      show: false,
      // inRange: {
      //   color: [
      //   ],
      // },
    },
    tooltip: {
      fontSize: fontSize(0.16),
    },
    legend: {},
    series: [
      {
        type: 'treemap',
        data: datalist,
        left: 0,
        top: 0,
        right: 0,
        roam: false,
        squareRatio: 1.8,
        nodeClick: false,
        breadcrumb: {
          show: false,
          height: 0,
        },
      },
    ],
  }
}

export { TreeMap1Option, activeColor }
